<template>
	<view class="final_statement">
		<view class="main_card">
			<view class="shop_Card">
				<view class="left">
					<image :src="shop_info.category_image" mode="" class="icon"></image>
					<view class="title">
						{{shop_info.shop_name}}
					</view>
				</view>
				<view class="right" @click="popupShow = true">
					切换
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon1"></image>
				</view>
			</view>
			<view class="salary_box">
				<view class="title">
					<view class="button-box" @click.stop="changeDate(info.left_info)">
						<u-icon name="play-left-fill" :color="info.left_info.is_bright?'#73F0EA':'#DBDBDB'" size="28"
							></u-icon>
					</view>
					<text class="size">{{info.title}}</text>
					<view class="button-box" @click.stop="changeDate(info.right_info)">
						<u-icon name="play-right-fill" :color="info.right_info.is_bright?'#73F0EA':'#DBDBDB'" size="28"
							></u-icon>
					</view>	
				</view>
				<view v-for="(item,index) in info.list" :key="index" class="Item"
					:style="{backgroundImage: item.background, border:item.border}">
					<view class="header">
						<view class="left">
							{{item.name}}
						</view>
						<view>
							{{item.num}}
						</view>
					</view>
					<view class="bottom">
						<view v-for="(childitem,childindex) in item.child" :key="childindex" class="child"
							:class="(childindex + 1) % item.child.length === 0 ? '' : 'mb'">
							<text class="left">{{childitem.name}}</text>
							<text>{{childitem.num}}</text>
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="money">
						<image :src="$IMG_URL('/static/user/money.png')" mode="" class="icon"></image>
					</view>
					<view class="right">
						<view class="rtitle">
							{{info.income_info.title}}
						</view>
						<view class="rsize">
							{{info.income_info.hint_str}}
						</view>
					</view>
					<view class="total">
						￥{{info.income_info.account}}
					</view>
				</view>
			</view>
			<view class="empty">
				{{info.income_info.bottom_str}}
			</view>
		</view>
		<FieldPopupVue :popupShow="popupShow" :FieldList="Field" @sure="sure" @changeActiveIndex="changeActiveIndex"
			:activeIndex="FieldIndex"></FieldPopupVue>
	</view>
</template>

<script>
	import FieldPopupVue from '../../pages/user/components/Field-popup.vue'
	import {
		atShop,
		storefinanceMonth
	} from '@/api/manager.js'
	export default {
		components: {
			FieldPopupVue
		},
		data() {
			return {
				// 切换门店
				query: {
					date: '',
					shop_id: ''
				},
				popupShow: false,
				Field: [],
				FieldIndex: -1,
				shop_info: {},
				info: {},
			}
		},
		onLoad() {
			this.getatShop()
			this.getstorefinanceMonth()
		},
		methods: {
			changeDate(item) {
				console.log('item', item);
				if (item.is_bright) {
					this.query.date = item.date
					this.getstorefinanceMonth()
				} else {
					uni.showToast({
						title: '没有数据', // 你可以根据需要自定义这个提示信息
						icon: 'none', // 如果你不希望显示图标，可以将icon设置为'none'
						duration: 2000 // 显示时间，单位毫秒，默认1500
					});
				}
			},
			getstorefinanceMonth() {
				storefinanceMonth(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			getatShop(e) {
				atShop(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop_info = res.data
					}
				})
			},
			// 切换门店
			changeActiveIndex(item, index) {
				this.FieldIndex = index
				this.query.shop_id = item.shop_id
				this.getatShop({
					shop_id: item.shop_id
				})
				this.getstorefinanceMonth()
			},
			sure() {
				this.popupShow = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.final_statement {
		display: flex;
		flex-direction: column;
		align-items: center;

		.main_card {
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 702rpx;

			.shop_Card {
				width: 702rpx;
				height: 120rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				padding: 26rpx 32rpx 60rpx;
				display: flex;
				flex-direction: row;

				.left {
					display: flex;
					flex-direction: row;
					flex: 1;

					.icon {
						width: 114rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: right;
					color: #666666;

					.icon1 {
						width: 10rpx;
						height: 16rpx;
						margin-left: 8rpx;
					}
				}
			}

			.salary_box {
				margin-top: -22rpx;
				width: 702rpx;
				background: #ffffff;
				border-radius: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 32rpx 0 30rpx;
				
				.title {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin-bottom: 32rpx;
					.button-box{
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.icon {
						width: 18rpx;
						height: 28rpx;
					}

					.size {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
					}
				}

				.Item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 654rpx;
					border-radius: 32rpx;
					overflow: hidden;
					margin-bottom: 24rpx;

					.header {
						width: 100%;
						padding: 24rpx 32rpx 0;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #ffffff;
						display: flex;
						flex-direction: row;
						margin-bottom: 48rpx;

						.left {
							flex: 1;
						}
					}

					.bottom {
						margin-top: -24rpx;
						width: 654rpx;
						background: #ffffff;
						border-radius: 32rpx;
						z-index: 99;
						padding: 24rpx 32rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.mb {
							margin-bottom: 24rpx;
						}

						.child {
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							color: #333333;

							.left {
								flex: 1;

							}
						}
					}
				}

				.foot {
					width: 654rpx;
					border-top: 2rpx solid #f8f8f8;
					padding-top: 34rpx;
					display: flex;
					flex-direction: row;

					.money {
						width: 80rpx;
						height: 80rpx;
						background: linear-gradient(180deg, rgba(129, 202, 197, 0.3), rgba(129, 202, 197, 0.1));
						border: 2rpx solid #73F0EA;
						border-radius: 14rpx;
						margin: 0 20rpx 0 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon {
							width: 40rpx;
							height: 42rpx;
						}

					}

					.right {
						display: flex;
						flex-direction: column;
						flex: 1;

						.rtitle {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #000000;
							margin-bottom: 2rpx;
						}

						.rsize {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #999999;
						}
					}

					.total {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #000000;
					}
				}
			}
		}
	}

	.empty {
		width: 100%;
		height: 106rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>